<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!--
            父-子
            (1)通过[属性]给子组件传值  props接收
            (2)通过[标签内容]进行传值  slot接收
        -->
        <com>
            <p>我没有设置slot名字</p>
            <b slot='b'>我是b标签</b>
            <i slot='i'>我是i标签</i>
        </com>
        <hr>
        <scope-slot  val='hello'>
            <template scope='props'>
                {{props.val}}
            </template>
        </scope-slot>
    </div>
    <script src='vue.js'></script>
    <script type="text/html" id="com">
        <div>
            <h1>这是子组件标题</h1>
            <slot></slot>
            <!--
                slot中也可以添加内容 == 用于备用的内容
                组件中添加了，用组件中的；没有添加，用slot中的内容。
                备用内容在子组件的作用域内编译，并且只有在宿主元素为空，且没有要插入的内容时才显示备用内容。
            -->
            <slot name='b'>这是slot中的内容</slot>
            <p>这是子组件内容</p>
            <slot name='i'></slot>
        </div>
    </script>
    <script type="text/html" id="scope-slot">
        <div>
            <slot :val='val'></slot>
        </div>
    </script>
    <script>
        Vue.component('com',{
            template:'#com',
            data:function(){
                return {
                    num:10 /*一个组件的数据只能在这个组件的模板中使用*/
                }
            }
        })
        Vue.component('scope-slot',{
            template:'#scope-slot',
            props:['val']
        })
        new Vue({
            el:'#app',
            data:{
                num:'----'
            }
        })
    </script>
</body>
</html>